import classnames from 'classnames';
import React, { ReactNode, useContext } from 'react';
import { ConfigContext } from '../configProvider';
import './index.less';

interface CardProps {
  extra?: ReactNode;
  children?: ReactNode;
  className?: string;
  style?: object;
  title?: string;
  border?: boolean;
  size?: string;
}

export default function Button(props: CardProps) {
  const { className, title, extra, style, children, border, size } = props;

  const { prefix } = useContext(ConfigContext);
  const cardPrefix = prefix + '-card';
  const allClasses = classnames(
    cardPrefix,
    {
      [`${cardPrefix}-border`]: border !== false,
    },
    className,
  );

  const smallHeadClasses = classnames(`${cardPrefix}-head`, {
    [`${cardPrefix}-head-small`]: size === 'small',
  });

  const smallContentClasses = classnames(`${cardPrefix}-content`, {
    [`${cardPrefix}-content-small`]: size === 'small',
  });

  return (
    <div className={allClasses} style={style}>
      {title || extra ? (
        <div className={smallHeadClasses}>
          <p>{title}</p>
          <div>{extra}</div>
        </div>
      ) : null}
      <div className={smallContentClasses}>{children}</div>
    </div>
  );
}
